<template>
  <div style="margin: 15px">
    <el-row style="margin-bottom: 15px">
      <el-col :span="18">
        <el-button type="primary" size="small" @click="handeladdMsbd">新增文章</el-button>
      </el-col>
      <el-col :span="6">
        <el-input
          prefix-icon="el-icon-search"
          size="small"
          placeholder="请输入内容"
          v-model="input"
          clearable
          @keyup.enter.native="search"
        >
        </el-input>
      </el-col>
    </el-row>

    <!-- table -->
    <MsbdTable></MsbdTable>
    <Pagination></Pagination>

    <!-- Drawer 抽屉 -->
    <el-drawer
      :title="title+'面试文章'"
      :visible.sync="drawer"
      :wrapperClosable="false"
      :before-close="handeladdMsbd"
      size="50%"
    >
    <MsbdForm></MsbdForm>
    </el-drawer>
  </div>
</template>

<script>
import MsbdTable from "./components/MsbdTable.vue";
import MsbdForm from "./components/MsbdForm.vue";
import Pagination from './components/Pagination.vue';
import {mapMutations,mapState,mapActions} from "vuex"
export default {
  data() {
    return {
      input: "",
    //   drawer: false,
    //   direction: 'rtl',
      title:"新增"
    };
  },
  methods:{
      ...mapMutations('msbdList',['SET_DRAWER','SET_INPUTVAL']),
      ...mapActions('msbdList',['getMsbdlist']),
      search(){
          this.SET_INPUTVAL(this.input)
          this.getMsbdlist()
      },
      // 新增  
      handeladdMsbd(){
          this.SET_DRAWER(this.drawer)
      }
  },
  computed:{
      ...mapState('msbdList',['drawer']),

  },
  components: {
    MsbdTable,
    MsbdForm,
    Pagination
  },
};
</script>
<style >
.el-drawer .rtl {
  overflow: scroll;
}
</style>
<style scoped>
/deep/ :focus {
  outline: 0;
}

</style>
